<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,body{ border: 0 none;}
    </style>
</head>
<body>

<div id="div1" style="border: 5px solid #f00; width:200px; height: 300px; position:absolute; left:30px; top:200px;">
    <div id="div1_in" style="width:20px; margin-left: 20px; height: 30px; position:absolute; left:10px; top:20px; border: 2px solid #333;">
        margin-left: 20px;
    </div>

</div>
<div id="div2"
     style="border: 5px solid #f00; margin:40px 30px 30px 200px; width:200px; height: 300px; position:absolute; left:10px; top:200px;"></div>

<script type="text/javascript">
    //取得元素x坐标
    function getCoords(el) {
        var box = el.getBoundingClientRect(),
                doc = el.ownerDocument,
                body = doc.body,//ie quickMode && webkit(navigator.vendor)
                root = doc.documentElement,
                clientTop = root.clientTop || body.clientTop || 0,
                clientLeft = root.clientLeft || body.clientLeft || 0,
                /**
                 * clientLeft有可能有3种取值：
                 * 0:一般情况
                 * undefind：改为0，可以这样：undefind>>0 或者：undefind || 0
                 * 2:在quickMode
                 */
                top = box.top + (window.pageYOffset || root.scrollTop || body.scrollTop ) - clientTop,
                left = box.left + (window.pageXOffset || root.scrollLeft || body.scrollLeft) - clientLeft;
        return { 'top':top, 'left':left };
    }
    var div1 = document.getElementById('div1');
    var div1_in = document.getElementById('div1_in');
    var div2 = document.getElementById('div2');
</script>


</body>
</html>